'use client';

import { useWeatherStore } from '@/store/weatherStore';
import { format } from 'date-fns';
import { zhCN } from 'date-fns/locale';
import { getWeatherIcon } from '@/utils/helpers';

export default function HourlyForecast() {
    const hourlyForecast = useWeatherStore((state) => state.hourlyForecast);

    return (
        <div className="bg-white/80 backdrop-blur-md rounded-2xl p-4 shadow-lg">
            <h3 className="text-lg font-medium mb-4">24小时预报</h3>
            <div className="flex overflow-x-auto pb-2 gap-4">
                {hourlyForecast.map((forecast, index) => (
                    <div
                        key={index}
                        className="flex flex-col items-center min-w-[80px]"
                    >
                        <span className="text-sm text-gray-600">
                            {format(new Date(forecast.time), 'HH:mm', { locale: zhCN })}
                        </span>
                        <div className="my-2">
                            {getWeatherIcon(forecast.weatherCode)}
                        </div>
                        <span className="font-medium">
                            {Math.round(forecast.temperature)}°
                        </span>
                    </div>
                ))}
            </div>
        </div>
    );
}